<template>
  <div class="funnel">
    <section class="funnel__bread-crumb">
      <BreadCrumb
        v-model:dateRange="dateRange"
        :show-date="true"
        @change="dateChange"
      />
    </section>
    <section class="base-page-container funnel__search">
      <el-radio-group v-model="targetSelect" class="has-mb" @change="targetChange">
        <el-radio-button v-for="item in targetOptions" :key="item.value" :label="item.value">
          {{ item.label }}
        </el-radio-button>
      </el-radio-group>
      <BaseRadioGroupLabelItem
        v-model:select="deviceSelect"
        label="设备"
        :options="deviceOptions"
        @change="deviceChange"
      />
      <BaseRadioGroupLabelItem
        v-model:select="channelSelect"
        label="渠道"
        :options="channelOptions"
        @change="channelChange"
      />
      <BaseRadioGroupLabelItem
        v-model:select="userLabelSelect"
        label="用户标签"
        :disabled="true"
        :no-margin-bottom="true"
        :options="userLabelOptions"
        @change="userLabelChange"
      />
    </section>
    <!-- 图表 -->
    <section class="base-page-container funnel__rate">
      <div class="funnel__rate__chart">
        <KLineChart
          width="100%"
          height="236px"
          x-type="date"
          y-type="number"
          :x-data="lineChartXData"
          :y-data="lineChartYData"
          :options="{ showSeriesName: true, seriesName: '占比' }"
        />
      </div>
      <div class="funnel__rate__content">
        <div class="funnel-left">
          <p class="funnel-left__value">99.87%</p>
          <p class="funnel-left__label">整体转化率</p>
        </div>
        <ul class="funnel-mid">
          <li>
            <p class="funnel-mid__value">120.2万</p>
            <p class="funnel-mid__label">进入会员页</p>
          </li>
          <li>
            <p class="funnel-mid__value">120.2万</p>
            <p class="funnel-mid__label">登录注册页</p>
          </li>
          <li>
            <p class="funnel-mid__value">120.2万</p>
            <p class="funnel-mid__label">注册成功</p>
          </li>
        </ul>
        <ul class="funnel-right">
          <li class="funnel-right__item">99.87%</li>
          <li class="funnel-right__item">99.87%</li>
        </ul>
      </div>
    </section>
    <!-- 表格 -->
    <section class="base-page-container">
      <KTable v-loading="state.loading" v-bind="tableState" v-on="tableEvent">
      </KTable>
    </section>
  </div>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs';
import { ref, reactive } from 'vue';
import BreadCrumb from '@/components/base-bread-crumb/index.vue';
import { BaseRadioGroupLabelItem } from '@/components/base-form';
import { KLineChart } from '@/components/k-charts';
import { useTableList } from './hooks/use-table-funnel';
import { deviceOptions, userLabelOptions, channelOptions } from './data.ts';
defineOptions({
  name: 'KgjAnalysisFunnel'
});
const { state, tableState, tableEvent } = useTableList({ });
const deviceSelect = ref('0');
const deviceChange = (val: string | number | boolean) => {
  console.log(val);
};
const channelSelect = ref(0);
const userLabelChange = (val: string | number | boolean) => {
  console.log(val);
};
const channelChange = (val: string | number | boolean) => {
  console.log(val);
};
const userLabelSelect= ref('0');
const targetSelect = ref(1);
const targetOptions: any[] = reactive([
  { label: '注册转化', value: 1 },
  { label: '成交转化', value: 2 }
]);
const targetChange = () => {
  console.log(1);
};
// 折线图表
const lineChartXData = ref([
  dayjs('2023-07-13 00:00:00').unix(),
  dayjs('2023-07-14 06:00:00').unix(),
  dayjs('2023-07-15 12:00:00').unix(),
  dayjs('2023-07-16 18:00:00').unix()
]);
const lineChartYData = ref([
  {
    name: '新访客到登录注册页',
    color: '#4975E9',
    data: [1000, 2000, 4000, 6000]
  },
  {
    name: '登录注册页到注册成功',
    color: '#67C23A',
    data: [6000, 4000, 2000, 1000]
  },
  {
    name: '整体转化率',
    color: '#F56C6C',
    data: [13000, 34315, 34315, 13000]
  }
]);
const dateRange = ref(null);
const dateChange = () => {
  console.log(11);
};
</script>
<style lang="scss" scoped>
.funnel {
  &__title {
    height: 24px;
    margin-bottom: $baseMarginBottom;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #303133;
  }

  :deep(.el-radio-group).has-mb {
    margin-bottom: 12px;
  }

  &__rate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 236px;

    &__chart {
      flex: 1;
    }

    &__content {
      position: relative;
      box-sizing: border-box;
      flex-shrink: 0;
      width: 334px;
      height: 198px;
      margin: 0 24px 0  48px;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
      color: #606266;
      background: url('@images/kgj/bg-funnel-rate.png') no-repeat center center;

      .funnel-left,
      .funnel-right {
        position: absolute;

        &__value {
          letter-spacing: -.01px;
        }
      }

      .funnel-left {
        top: 84px;
        left: 0;

        &__value {
          font-size: 16px;
          font-weight: 500;
          color: #303133;
        }
      }

      .funnel-mid {
        box-sizing: border-box;
        padding-left: 100px;

        li {
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 58px;
          margin-bottom: 12px;
          color: #fff;
        }

        &__value {
          font-weight: 500;
        }

        &__value,
        &__label {
          height: 20px;
          line-height: 20px;
        }

      }

      .funnel-right {
        top: 30px;
        right: 0;

        &__item {
          height: 65px;
          margin-bottom: 12px;
          line-height: 65px;
        }
      }
    }
  }
}
</style>
